<!-- src/views/Tools.vue -->
<template>
    <div class="tools-container">
      <!-- <div class="space" style="height: 80px;"></div> -->
      <el-row :gutter="20">
        <el-col :span="6">
          <ToolTree />
        </el-col>
        <el-col :span="18">
          <router-view />
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import ToolTree from '@/components/DocToolTree.vue';
  import { loadAlgorithms } from '@/utils/loadAlgorithms';
  
  export default {
    components: {
      ToolTree,
    },
    data() {
      return {
        tools: [],
      };
    },
    mounted() {
      const categories = loadAlgorithms();
      this.tools = categories.flatMap(category => category.tools);
    },
  };
  </script>
  
  <style scoped>
  .tools-container {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    padding: 80px;
    margin: 1 auto; /* 水平居中 */
  }
  
  
  </style>